<template>
  <div class="base-table">
    <el-table
      :data="tableData"
      :stripe="stripe"
      :border="border"
      :style="{ width: width }"
      @cell-click="handleCellClick"
    >
      <slot name="columns">
        <template v-for="(column, index) in columns" :key="index">
          <el-table-column
            :prop="column.prop"
            :label="column.label"
            :fixed="column.fixed"
            :width="column.width"
          >
            <template #default="scope" v-if="column.render">
              <slot :name="column.slotName" v-bind="scope">
                {{ scope.row[column.prop] }}
              </slot>
            </template>
          </el-table-column>
        </template>
      </slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  methods: {
    handleCellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.base-table {
  :deep(.el-table) {
    background: transparent;
    
    th.el-table__cell {
      background: #f5f7fa;
      color: #333;
      font-weight: bold;
    }

    td.el-table__cell {
      color: #333;
      font-weight: 600;
    }
  }
}
</style>